<!DOCTYPE html>
<html lang='cn'>
<head>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/picnic'>
    <script src='https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js'></script>
    <title>像素时钟</title>
    <style>
        span {font-size:120%}
        label {height:80%}
        h1 label {margin: 0 auto; text-align: center;}
        div label {margin: 0 auto; text-align: center;}
        dev img {margin: 0 auto; text-align: center;}
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: -webkit-linear-gradient(#1765db, #1765db) no-repeat, #ddd;
            height: 3px;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 26px;
            width: 26px;
            background: #fff;
            border-radius: 50%;
            border: solid 1px #ddd;
        }
        .range {font-size:150%}
        .pseudo button{font-weight: 30%;}
    </style>
</head>
<body>
    <div class='tabs four'>
        <input id='tab-1' type='radio' name='tabgroupB' checked>
        <label class='pseudo button toggle' for='tab-1' style='font-size: 3em;'>主页</label>
        <input id='tab-2' type='radio' name='tabgroupB'>
        <label class='pseudo button toggle' for='tab-2' style='font-size: 3em;'>模式</label>
        <input id='tab-3' type='radio' name='tabgroupB'>
        <label class='pseudo button toggle' for='tab-3' style='font-size: 3em;'>配置</label>
        <input id='tab-4' type='radio' name='tabgroupB'>
        <label class='pseudo button toggle' for='tab-4' style='font-size: 3em;'>风格</label>
        <div class='row'>
            <div>
                <h1 class='flex center'>主页</h1>
                <div class='flex one center'>
                    <div >
                        <img id='emojis' onclick='clickEmoji(event);' style='height: 610px;width: 655px;margin: 0 auto; text-align: center;'
                    src=''>
                
                    </div>
                </div>
                <h1 id='out' style='margin: 0 auto; text-align: center;'></h1>
                <div style='margin: 0 auto; text-align: center;'>
                    <canvas id='emoji' width='40' height='40'></canvas>
                </div>
                <script>
                var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);
                connection.onopen = function () { connection.send('Connect ' + new Date()); }; 
                connection.onerror = function (error) { console.log('WebSocket Error ', error); }; 
                connection.onmessage = function (e) { console.log('Server: ', e.data); 
                    if(e.data[0]=='{'){
                        console.log('json');
                        var jsonOb = eval('('+e.data+')');
                        var brightNess = typeof(jsonOb.brightNess)=='undefined'? 150:jsonOb.brightNess;
                        var mode = typeof(jsonOb.mode)=='undefined'? 2:jsonOb.mode;
                        var huea = typeof(jsonOb.huea)=='undefined'? 180:jsonOb.huea;
                        var hued = typeof(jsonOb.hued)=='undefined'? 180:jsonOb.hued;
                        var hueh = typeof(jsonOb.hueh)=='undefined'? 180:jsonOb.hueh;
                        var huem = typeof(jsonOb.huem)=='undefined'? 180:jsonOb.huem;
                        var hues = typeof(jsonOb.hues)=='undefined'? 180:jsonOb.hues;
                        var huew = typeof(jsonOb.huew)=='undefined'? 180:jsonOb.huew;
                        var hueb = typeof(jsonOb.hueb)=='undefined'? 180:jsonOb.hueb;
                        var clockMode = typeof(jsonOb.clockMode)=='undefined'? 1:jsonOb.clockMode;
                        var dateMode = typeof(jsonOb.dateMode)=='undefined'? 1:jsonOb.dateMode;
                        var loopMode = typeof(jsonOb.loopMode)=='undefined'? 1:jsonOb.loopMode;
                        var bFansMode = typeof(jsonOb.bFansMode)=='undefined'? 1:jsonOb.bFansMode;
                        $(\"input[name='radio-mode']\").eq(mode-1).attr('checked','checked');
                        $(\"input[name='radio-clock']\").eq(clockMode-1).attr('checked','checked');
                        $(\"input[name='radio-date']\").eq(dateMode-1).attr('checked','checked');
                        $(\"input[name='radio-loop']\").eq(loopMode-1).attr('checked','checked');
                        $(\"input[name='radio-bf']\").eq(bFansMode-1).attr('checked','checked');
                        document.getElementById('bt').value=parseInt(brightNess);
                        document.getElementById('bt_value').value=parseInt(brightNess);
                        document.getElementById('huea').value=parseInt(huea);
                        document.getElementById('huea_value').value=parseInt(huea);
                        document.getElementById('hued').value=parseInt(hued);
                        document.getElementById('hued_value').value=parseInt(hued);
                        document.getElementById('hueh').value=parseInt(hueh);
                        document.getElementById('hueh_value').value=parseInt(hueh);
                        document.getElementById('huem').value=parseInt(huem);
                        document.getElementById('huem_value').value=parseInt(huem);
                        document.getElementById('hues').value=parseInt(hues);
                        document.getElementById('hues_value').value=parseInt(hues);
                        document.getElementById('huew').value=parseInt(huew);
                        document.getElementById('huew_value').value=parseInt(huew);
                        document.getElementById('hueb').value=parseInt(hueb);
                        document.getElementById('hueb_value').value=parseInt(hueb);
                               
                    }
                };
                function clickEmoji(e) { 
                    var xo = 15; var yo = 15; var xs = 65; var ys = 60;
                    var x = e.offsetX; 
                    var y = e.offsetY;
                    var c = Math.round((x - xo - 20) / xs); 
                    var r = Math.round((y - yo - 20) / ys); 
                    document.getElementById('out').innerText = 'Selected [' + (c + 1) + ', ' + (r + 1) + ']'; 
                    var img = document.getElementById('emojis'); 
                    var ce = document.getElementById('emoji'); var ctx = ce.getContext('2d'); 
                    ctx.drawImage(img, -(xo + (xs * c)), -(yo + (ys * r)), 655, 610); 
                    var index = 'p' + c + '' + r; console.log('index: ' + index); 
                    connection.send(index); 
                }
                function FirmwareInfo(){
                    console.log('FirmwareInfo: F'); 
                    connection.send('F');
                }
                </script>
                <div class='flex one center'>
                    <label>
                        <button class='success' onclick='FirmwareInfo()' style='font-size: 2.5em;right: 0px;'>固件信息</button>
                    </label>
                </div>
            </div>
            
            <div>
                <h1 class='flex center'>模式选择</h1>
                <div style='height: 800px;'>
                    <h1 class='flex one'>
                            <label>
                                <input type='radio' onclick='changeMode(1);' name='radio-mode'>
                                <span class='checkable'>时钟</span>
                            </label>
                            <br><br>
                            <label>
                                <input type='radio' onclick='changeMode(2);' name='radio-mode'>
                                <span class='checkable'>日期</span>
                            </label>
                            <br><br>
                            <label>
                                <input type='radio' onclick='changeMode(3);' name='radio-mode'>
                                <span class='checkable'>时钟+日期</span>
                            </label>
                            <br><br>
                            <label>
                                <input type='radio' onclick='changeMode(4);' name='radio-mode'>
                                <span class='checkable'>天气</span>
                            </label>
                            <br><br>
                            <label>
                                <input type='radio' onclick='changeMode(5);' name='radio-mode'>
                                <span class='checkable'>代码雨</span>
                            </label>
                            <br><br>
                            <label>
                                <input type='radio' onclick='changeMode(6);' name='radio-mode'>
                                <span class='checkable'>B站粉丝数</span>
                            </label>
                    </h1>
                </div>
                <br><br>
                <script>
                    function changeMode(num) { 
                        var modelNum = 'm' + parseInt(num).toString(16); 
                        console.log('Model: ' + modelNum); 
                        connection.send(modelNum);
                    }
                    function nextMode(num) { 
                        var modelNum = 'mc'; 
                        console.log('Model: ' + modelNum); 
                        connection.send(modelNum);
                    }
                </script>
                <div class='flex two center'>
                    <label>
                        <button class='success' onclick='nextMode()' style='font-size: 2.5em;right: 0px;'>模式Next</button>
                    </label>
                    <label >
                        <label for='tab-1' class='button normal' style='font-size: 2.5em;'>返回主页</label>
                    </label>
                </div>
              </div>

          <div>
            <h1 class='flex center'>亮度</h1>
            <div class='range'>
                <fieldset class='flex three center'>
                    <label style='text-align:right;''><span class='label normal' >亮度</span></label>
                    <label><input id='bt' type='range' min='0' max='255' step='1' oninput='sendBrightness();'/></label> 
                    <label><input id='bt_value' type='text' style='border: 0;' value='125'/> </label>
                </fieldset>
            </div>
            <h1 class='flex center'>颜色</h1>
            <div class='range'>
                <fieldset class='flex three center'>
                    <label style='text-align:right;'><span class='label normal' >全局</span></label>
                    <label><input id='huea' type='range' min='0' max='360' step='1' oninput='sendHue(\"a\");' /></label> 
                    <label><input id='huea_value' name='hue_value' type='text' style='border: 0;' value='180'/> </label>
                </fieldset>
            </div>
            <div class='range'>
                <fieldset class='flex three center'>
                    <label style='text-align:right;'><span class='label normal' >冒号</span></label>
                    <label><input id='hued' type='range' name='hue_value' min='0' max='360' step='1' oninput='sendHue(\"d\");' /></label> 
                    <label><input id='hued_value' name='hue_value' type='text' style='border: 0;' value='180'/> </label>
                </fieldset>
            </div>
            <div class='range'>
                <fieldset class='flex three center'>
                    <label style='text-align:right;'><span class='label normal' >小时</span></label>
                    <label><input id='hueh' type='range' name='hue_value' min='0' max='360' step='1' oninput='sendHue(\"h\");' /></label> 
                    <label><input id='hueh_value' name='hue_value' type='text' style='border: 0;' value='180'/> </label>
                </fieldset>
            </div>
            <div class='range'>
                <fieldset class='flex three center'>
                    <label style='text-align:right;'><span class='label normal' >分钟</span></label>
                    <label><input id='huem' type='range' name='hue_value' min='0' max='360' step='1' oninput='sendHue(\"m\");' /></label> 
                    <label><input id='huem_value' name='hue_value' type='text' style='border: 0;' value='180'/> </label>
                </fieldset>
            </div>
            <div class='range'>
                <fieldset class='flex three center'>
                    <label style='text-align:right;'><span class='label normal' >秒钟</span></label>
                    <label><input id='hues' type='range' name='hue_value' min='0' max='360' step='1' oninput='sendHue(\"s\");' /></label> 
                    <label><input id='hues_value' name='hue_value' type='text' style='border: 0;' value='180'/> </label>
                </fieldset>
            </div>
            <div class='range'>
                <fieldset class='flex three center'>
                    <label style='text-align:right;'><span class='label normal' >星期</span></label>
                    <label><input id='huew' type='range' name='hue_value' min='0' max='360' step='1' oninput='sendHue(\"w\");' /></label> 
                    <label><input id='huew_value' name='hue_value' type='text' style='border: 0;' value='180'/> </label>
                </fieldset>
            </div>
            <div class='range'>
                <fieldset class='flex three center'>
                    <label style='text-align:right;'><span class='label normal' >BF</span></label>
                    <label><input id='hueb' type='range' name='hue_value' min='0' max='360' step='1' oninput='sendHue(\"b\");' /></label> 
                    <label><input id='hueb_value' name='hue_value' type='text' style='border: 0;' value='180'/> </label>
                </fieldset>
            </div>
            <br><br>
            <script>
            function sendBrightness() { 
                var Obrightness = document.getElementById('bt').value; 
                var oMessage = 's'; 
                if (Obrightness.length == 1) { 
                    oMessage = oMessage + '00'; 
                } else if (Obrightness.length == 2) { 
                    oMessage = oMessage + '0'; 
                } 
                document.getElementById('bt_value').value=parseInt(Obrightness ? Obrightness : 999);
                oMessage = oMessage + parseInt(Obrightness ? Obrightness : 999); 
                console.log('oMessage: ' + oMessage); connection.send(oMessage); 
            }
            function sendHue(n) { 
                var OHueValue = document.getElementById('hue'+n).value; 
                var oMessage = 'h'+n; 
                if (OHueValue.length == 1) { 
                    oMessage = oMessage + '00'; 
                } else if (OHueValue.length == 2) { 
                    oMessage = oMessage + '0'; 
                } 
                if(n=='a'){
                    var els =document.getElementsByName('hue_value');
                    for (var i = 0, j = els.length; i < j; i++){
                        els[i].value = OHueValue;
                    }
                }else{
                    document.getElementById('hue'+n+'_value').value=parseInt(OHueValue ? OHueValue : 360);
                }
                oMessage = oMessage + parseInt(OHueValue ? OHueValue : 999); 
                console.log('oMessage: ' + oMessage); connection.send(oMessage); 
            }
            function configSave() {
                var oMessage = 'c'; 
                console.log('oMessage: ' + oMessage); connection.send(oMessage); 
            }
            </script>
            <div class='flex two center'>
                <label>
                    <button class='success' onclick='configSave()' style='font-size: 2.5em;right: 0px;'>保存配置</button>
                </label>
                <label >
                    <label for='tab-1' class='button normal' style='font-size: 2.5em;'>返回主页</label>
                </label>
            </div>
            
          </div>

          <div>
            <h1 class='flex center'>时钟风格</h1>
            <div style='height: 1300px;'>
                <h1 class='flex one'>
                        <label>
                            <input type='radio' onclick='clockMode(1);' name='radio-clock'>
                            <span class='checkable'>HH:mm:ss</span>
                        </label>
                        <br>
                        <label>
                            <input type='radio' onclick='clockMode(2);' name='radio-clock'>
                            <span class='checkable'>HH:mm</span>
                        </label>
                        <br>
                        <label>
                            <input type='radio' onclick='clockMode(3);' name='radio-clock'>
                            <span class='checkable'>emoji HH:mm</span>
                        </label>
                        <br>
                        <label>
                            <input type='radio' onclick='clockMode(4);' name='radio-clock'>
                            <span class='checkable'>emoji HH:mm</span>
                        </label>
                </h1>
                <h1 class='flex center'>日期风格</h1>
                <h1 class='flex one'>
                        <label>
                            <input type='radio' onclick='DateModel(1);' name='radio-date'>
                            <span class='checkable'>MM.DD</span>
                        </label>
                        <br>
                        <label>
                            <input type='radio' onclick='DateModel(2);' name='radio-date'>
                            <span class='checkable'>emoji MM.DD</span>
                        </label>
                </h1>
                <h1 class='flex center'>切换风格</h1>
                <h1 class='flex one'>
                        <label>
                            <input type='radio' onclick='LoopModel(1);' name='radio-loop'>
                            <span class='checkable'>上下滑动</span>
                        </label>
                        <br>
                        <label>
                            <input type='radio' onclick='LoopModel(2);' name='radio-loop'>
                            <span class='checkable'>渐隐渐显</span>
                        </label>
                </h1>
                <h1 class='flex center'>粉丝数风格</h1>
                <h1 class='flex one'>
                        <label>
                            <input type='radio' onclick='BFansModel(1);' name='radio-bf'>
                            <span class='checkable'>单一颜色</span>
                        </label>
                        <br>
                        <label>
                            <input type='radio' onclick='BFansModel(2);' name='radio-bf'>
                            <span class='checkable'>彩色</span>
                        </label>
                </h1>
            </div>
            <script>
                function clockMode(num) {
                    var styleNum = 't' + parseInt(num).toString(16);
                    console.log('时钟风格: ' + styleNum); 
                    connection.send(styleNum);
                }
                function DateModel(num) {
                    var styleNum = 'd' + parseInt(num).toString(16);
                    console.log('日期风格: ' + styleNum); 
                    connection.send(styleNum);
                }
                function LoopModel(num) {
                    var styleNum = 'l' + parseInt(num).toString(16);
                    console.log('切换风格: ' + styleNum); 
                    connection.send(styleNum);
                }
                function BFansModel(num) {
                    var styleNum = 'b' + parseInt(num).toString(16);
                    console.log('粉丝数风格: ' + styleNum); 
                    connection.send(styleNum);
                }
            </script>
            <div class='flex one'>
                <label >
                    <label for='tab-1' class='button normal' style='font-size: 2.5em;'>返回主页</label>
                </label>
            </div>
          </div>
       
        </div>
      </div>
</body>
</html>